<template>
<div>
    <Head /> 
    <div class="address_box bg">
        <div class="container">
            <!-- <div class="bolck_tit">
                <h3>Token
                    <span v-if="this.tokenList[0]">{{this.tokenList[0].name}} {{this.tokenList[0].symbol}}</span>
                </h3>
            </div> -->
            <div class="bolck_tit">
                <h3>Token   
                    <span v-if="this.tokenList[0]">{{this.tokenList[0].name}} {{this.tokenList[0].symbol}}</span>
                </h3>
                
                <Headsearch />
            </div>

            <div class="add_container">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="Transfers" name="Transfers">
                        <div class="row">
                            <h5 class="col-sm-6">
                                A total of {{this.tokentotalCount}} transactions found
                            </h5>
                            <div class="col-sm-6 pagination_box">
                                <button @click="$utils.onDownload(this.tokenList,'Token_data')">
                                    <el-icon>
                                        <Download />
                                    </el-icon>
                                    <span>Download Page Data</span>
                                </button>
                                <el-pagination @current-change="handleCurrentChange" small :pager-count="3"
                                    :page-size="this.pageSize" v-model:currentPage="this.pageNo" layout="prev, pager, next"
                                    :total="this.tokentotalCount">
                                </el-pagination>
                            </div>
                        </div>
                            <!-- <div class="row">
                                <h5 class="col-sm-6">
                                    A total of {{this.tokentotalCount}} transactions found
                                </h5>
                                
                                <div class="col-sm-6 pagination_box">
                                    <button @click="$utils.onDownload(this.blocksList)">
                                        <el-icon>
                                            <Download />
                                        </el-icon>
                                        <span>Download Page Data</span>
                                    </button>
                                    <el-pagination
                                        @current-change="handleCurrentChange"
                                        background
                                        small
                                        :page-size="this.pageSize"
                                        v-model:currentPage="this.pageNo"
                                        layout="prev, pager, next"
                                        :total="this.tokentotalCount">
                                </el-pagination>
                                </div>
                            </div> -->
                <Tokentable :addList="this.tokenList" :address="this.address" />
                <div v-if="this.tokentotalCount > 20">
                    <div class="row">
                    <h5 class="col-sm-4">
                        <el-pagination
                            @size-change="handleSizeChange"
                            :page-sizes="[10, 20, 50 ]"
                            :page-size="this.pageSize"
                            v-model:currentPage="this.pageNo"
                            layout="sizes"
                            :total="this.tokentotalCount">
                        </el-pagination>
                    </h5>
                    <!-- <div class="col-sm-8 pagination_box">
                         <el-pagination
                            @current-change="handleCurrentChange"
                            background
                            small
                            layout="prev, pager, next"
                            :total="this.totalCount">
                        </el-pagination>
                    </div> -->
                </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="Contract" name="Contract">
                <div v-loading="conloading" element-loading-text="Loading..." style="min-height:200px">
                    <IsVerify v-if="this.data" :data="this.data" />
                </div>
            </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
    <Foot />
</div>
  
</template>

<script>
import Foot from '@/components/foot.vue'
import Head from '@/components/head.vue'
import Tokentable from '@/components/tokentable.vue'
import IsVerify from '@/components/contract/isVerify.vue'
import Headsearch from '@/components/headsearch.vue'
import { Download } from '@element-plus/icons'

export default {
    data(){
        return {
            tokenList:[],
            tokentotalCount:0,
            pageNo:1,
            pageSize:20,
            blockNumber:0,
            address:null,
            activeName:'Transfers',
            data:null,
            conloading:true
        }
    },
    mounted(){
        this.address = this.$route.params.id || ''
        this.pageSize = parseInt(localStorage.getItem('pageSizetk')) || 20
        // console.log(this.$route.query.a)
        // console.log(this.address)
        this.getTokenTransfers()
    },
    methods: {
        handleSizeChange(e) {
            this.pageSize = e
            localStorage.setItem('pageSizetk',e)
            this.getTokenTransfers()
            console.log(e);
        },
        handleClick(e){
            if(e.props.name === 'Contract'){
                this.conloading = true
                this.getContract()
            }
            // console.log(this.data)
        },
        getContract(){
            var url = "api/Scan/GetContract"
            var param = {
                "address": this.address
            }
            setTimeout(()=>{
                this.$axios.post(url,param).then((res)=>{
                    console.log(res)
                    if(res.code == 'Success'){
                        this.data = res.data
                    }
                    this.conloading = false
                })
            },500)
            
        },
        handleCurrentChange(e){
            this.pageNo = e
            this.getTokenTransfers()
            console.log(e)
        },
        getTokenTransfers(){
            var url = "api/Scan/GetTokenTransfers"
            var param = {
                "pageNo":this.pageNo,
                "pageSize": this.pageSize,
                "address": this.$route.query.a || '',
                "contract":this.address
            }
            
            this.$loading(
                this.$axios.post(url,param).then((res)=>{
                    // console.log(res)
                    if(res.code == 'Success'){
                        this.ercloading = false
                        this.tokenList = res.data.list
                        console.log(this.tokenList)
                        this.tokentotalCount = res.data.totalCount
                    }
                })
            )
        }
    },
    components:{
        Foot,
        Head,
        Tokentable,
        IsVerify,
        Headsearch,
        Download
    }
}
</script>

<style lang="less" scoped>
// .pagination_box{margin: 1.2rem 0;display: flex;justify-content: flex-end;}
// .address_box {padding: 1rem 0 5rem ;}
</style>